

<template>
  <div class="review">
    <div class="headtab">
      <div style="height: 38px" class="flex justify-around align-center padding-lr-xl padding-tb-xs">
        <router-link
            :to="{ path: '/pages/review/review' }"
        >
          <view class="text-white text-lg flex justify-center align-center checked">逛逛</view>
        </router-link>
        <router-link
            :to="{ path: '/pages/headline/headline' }"
        >
          <view class="text-white text-lg flex justify-center align-center">头条</view>
        </router-link>
      </div>
    </div>
    <div class="video flex align-center">
      <swiper
          style="width: 100%; height: 100%"
          class="swiper"
          @change="swiperChange"
          display-multiple-items="1">
        <swiper-item
            style="width: 100%; height: 100%"
            v-for="(item, index) in lists" :key="index">
          <video autoplay style="width: 100%; height: 100%" :src="item.video"></video>
        </swiper-item>
      </swiper>
    </div>
    <tabbar></tabbar>
  </div>
</template>
<script>
import API_Request from '@/api/api'
export default {
  name: "review",
  data() {
    return {
      currentSwiper: 0,
      lists: []
    }
  },
  onLoad() {
    API_Request.getReviewList().then(res => {
      console.log(res)
      this.lists = res.data
    })
  },
  methods: {
    swiperChange(e) {
      this.currentSwiper = e.detail.current
    }
  }
}
</script>
<style scoped lang="scss">
.padding-tb-xs {
  padding-top: 5px;
  padding-bottom: 5px;
}
.padding-lr-xl {
  padding-left: 28px;
  padding-right: 28px;
}
.justify-center {
  justify-content: center;
}
.justify-around {
  justify-content: space-around;
}
.align-center {
  align-items: center;
}
page {
  height: 100%;
}
.text-white {
  color: #fff;
}
.text-lg {
  font-size: 18px;
}
.checked {
  font-weight: 800 !important;
  border-bottom: 2px solid #fff;
}
.review {
  height: 100%;
  position: relative;
  overflow: hidden;
  .video {
    height: 100%;
    background-color: #000;
  }
  .headtab {
    top: 30px;
    width: 229px;
    height: 29px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 990;
  }
}
</style>
